<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高级瀑布流布局展示</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
      padding: 0;
    }

    .header {
      background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
      color: white;
      padding: 40px 20px;
      text-align: center;
      margin-bottom: 30px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      letter-spacing: -0.5px;
    }

    .header p {
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
      font-weight: 300;
    }

    .container {
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* 瀑布流核心样式 */
    .waterfall {
      column-count: 5; /* 默认5列，增加列数提升密集感 */
      column-gap: 24px;
      padding-bottom: 40px;
    }

    /* 瀑布流项目样式 */
    .waterfall-item {
      break-inside: avoid;
      margin-bottom: 24px;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0,0,0,0.05);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      border: 1px solid rgba(0,0,0,0.03);
    }

    .waterfall-item:hover {
      transform: translateY(-8px) scale(1.01);
      box-shadow: 0 12px 24px rgba(0,0,0,0.12);
      z-index: 10;
    }

    /* 图片容器与样式 */
    .waterfall-img-container {
      position: relative;
      overflow: hidden;
    }

    .waterfall-item img {
      width: 100%;
      display: block;
      transition: transform 0.6s ease;
    }

    .waterfall-item:hover img {
      transform: scale(1.05);
    }

    /* 分类标签 */
    .waterfall-category {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: white;
      z-index: 5;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .category-nature { background-color: #2ecc71; }
    .category-city { background-color: #3498db; }
    .category-animal { background-color: #e74c3c; }
    .category-architecture { background-color: #f39c12; }
    .category-people { background-color: #9b59b6; }
    .category-food { background-color: #1abc9c; }

    /* 内容区域 */
    .waterfall-content {
      padding: 20px;
    }

    .waterfall-content h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #2c3e50;
      line-height: 1.4;
      transition: color 0.3s ease;
    }

    .waterfall-item:hover h3 {
      color: #3498db;
    }

    .waterfall-content p {
      font-size: 14px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 元数据区域 */
    .waterfall-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.05);
      font-size: 12px;
      color: #999;
    }

    .waterfall-author {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
    }

    /* 特殊项目样式 */
    .waterfall-item.featured {
      border: 2px solid #3498db;
    }

    .waterfall-item.featured::after {
      content: "精选";
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: #3498db;
      color: white;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    /* 交互元素 */
    .waterfall-actions {
      display: flex;
      gap: 15px;
      margin-top: 12px;
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #999;
      background: none;
      border: none;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .action-btn:hover {
      color: #3498db;
    }

    /* 加载更多按钮 */
    .load-more {
      display: block;
      margin: 40px auto;
      padding: 12px 30px;
      background-color: white;
      color: #3498db;
      border: 1px solid #3498db;
      border-radius: 30px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
    }

    .load-more:hover {
      background-color: #3498db;
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(52, 152, 219, 0.2);
    }

    /* 响应式设计 */
    @media (max-width: 1440px) {
      .waterfall { column-count: 4; }
    }

    @media (max-width: 1200px) {
      .waterfall { column-count: 3; }
      .header h1 { font-size: 2.2rem; }
    }

    @media (max-width: 768px) {
      .waterfall { column-count: 2; }
      .header { padding: 30px 15px; }
      .header h1 { font-size: 1.8rem; }
    }

    @media (max-width: 480px) {
      .waterfall { 
        column-count: 1; 
        column-gap: 0;
      }
      .waterfall-item { margin-bottom: 18px; }
      .header h1 { font-size: 1.5rem; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>探索世界的精彩瞬间</h1>
    <p>发现来自全球各地的美丽照片与故事，感受生活中的每一个精彩时刻</p>
  </div>

  <div class="container">
    <div class="waterfall">
      <!-- 项目1 -->
      <div class="waterfall-item featured">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/feat1/800/600" alt="山间云海">
        </div>
        <div class="waterfall-content">
          <h3>清晨山间的壮丽云海</h3>
          <p>当第一缕阳光穿透云层，整个山谷被金色的光芒笼罩，云海在脚下翻滚，如仙境一般。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 128</button>
            <button class="action-btn">💬 24</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user1/100/100" alt="作者头像" class="author-avatar">
              <span>李明</span>
            </div>
            <span>2小时前</span>
          </div>
        </div>
      </div>

      <!-- 项目2 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city1/800/1000" alt="城市天际线">
        </div>
        <div class="waterfall-content">
          <h3>雨后的城市天际线</h3>
          <p>一场大雨过后，城市的空气格外清新，天际线在湿润的空气中显得格外清晰，霓虹灯在湿滑的路面上留下斑斓的倒影。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 95</button>
            <button class="action-btn">💬 12</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user2/100/100" alt="作者头像" class="author-avatar">
              <span>王华</span>
            </div>
            <span>5小时前</span>
          </div>
        </div>
      </div>

      <!-- 项目3 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal1/800/500" alt="森林小鹿">
        </div>
        <div class="waterfall-content">
          <h3>森林中的小鹿</h3>
          <p>清晨的森林中，一只小鹿正在低头饮水，阳光透过树叶的缝隙洒在它身上，构成一幅和谐的画面。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 210</button>
            <button class="action-btn">💬 36</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user3/100/100" alt="作者头像" class="author-avatar">
              <span>张伟</span>
            </div>
            <span>昨天</span>
          </div>
        </div>
      </div>

      <!-- 项目4 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch1/800/650" alt="古老城堡">
        </div>
        <div class="waterfall-content">
          <h3>欧洲中世纪城堡</h3>
          <p>这座城堡建于12世纪，历经千年风雨依然矗立，每一块石头都诉说着古老的故事和历史的沧桑。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 156</button>
            <button class="action-btn">💬 28</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user4/100/100" alt="作者头像" class="author-avatar">
              <span>刘芳</span>
            </div>
            <span>2天前</span>
          </div>
        </div>
      </div>

      <!-- 项目5 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people1/800/700" alt="街头艺人">
        </div>
        <div class="waterfall-content">
          <h3>巴黎街头的艺人</h3>
          <p>在巴黎的一条古老街道上，一位艺人正在演奏小提琴，悠扬的琴声吸引了众多路人驻足聆听。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 87</button>
            <button class="action-btn">💬 9</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user5/100/100" alt="作者头像" class="author-avatar">
              <span>陈明</span>
            </div>
            <span>3天前</span>
          </div>
        </div>
      </div>

      <!-- 项目6 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-food">美食</span>
          <img src="https://picsum.photos/seed/food1/800/450" alt="意大利面">
        </div>
        <div class="waterfall-content">
          <h3>传统意大利面制作</h3>
          <p>这道经典的意大利面采用传统手工制作，搭配新鲜的番茄酱和帕玛森芝士，香气四溢。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 178</button>
            <button class="action-btn">💬 42</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user6/100/100" alt="作者头像" class="author-avatar">
              <span>赵静</span>
            </div>
            <span>3天前</span>
          </div>
        </div>
      </div>

      <!-- 项目7 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/nature1/800/800" alt="热带雨林">
        </div>
        <div class="waterfall-content">
          <h3>亚马逊热带雨林</h3>
          <p>热带雨林中生物多样性极为丰富，高大的树木遮天蔽日，各种奇特的动植物在这里繁衍生息。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 143</button>
            <button class="action-btn">💬 19</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user7/100/100" alt="作者头像" class="author-avatar">
              <span>孙伟</span>
            </div>
            <span>4天前</span>
          </div>
        </div>
      </div>

      <!-- 项目8 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city2/800/550" alt="地铁交通">
        </div>
        <div class="waterfall-content">
          <h3>东京繁忙的早高峰</h3>
          <p>清晨的东京地铁站，人潮涌动，这是这座大都市每天上演的繁忙景象，展现着城市的活力。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 67</button>
            <button class="action-btn">💬 8</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user8/100/100" alt="作者头像" class="author-avatar">
              <span>周琳</span>
            </div>
            <span>5天前</span>
          </div>
        </div>
      </div>

      <!-- 项目9 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal2/800/900" alt="海洋生物">
        </div>
        <div class="waterfall-content">
          <h3>深海中的奇妙生物</h3>
          <p>在深海的黑暗环境中，这些发光生物形成了独特的生态系统，它们的光芒如同海底的星辰。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 205</button>
            <button class="action-btn">💬 31</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user9/100/100" alt="作者头像" class="author-avatar">
              <span>吴浩</span>
            </div>
            <span>1周前</span>
          </div>
        </div>
      </div>

      <!-- 项目10 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch2/800/600" alt="现代建筑">
        </div>
        <div class="waterfall-content">
          <h3>现代主义建筑杰作</h3>
          <p>这座建筑以其简洁的线条和独特的几何形状成为城市地标，展现了现代建筑的美学追求。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 112</button>
            <button class="action-btn">💬 15</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user10/100/100" alt="作者头像" class="author-avatar">
              <span>郑燕</span>
            </div>
            <span>1周前</span>
          </div>
        </div>
      </div>

      <!-- 项目11 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people2/800/750" alt="乡村生活">
        </div>
        <div class="waterfall-content">
          <h3>乡村集市的热闹场景</h3>
          <p>每周一次的乡村集市是当地居民交流的重要场所，各种新鲜的农产品和手工艺品琳琅满目。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 98</button>
            <button class="action-btn">💬 14</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user11/100/100" alt="作者头像" class="author-avatar">
              <span>王强</span>
            </div>
            <span>1周前</span>
          </div>
        </div>
      </div>

      <!-- 项目12 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-food">美食</span>
          <img src="https://picsum.photos/seed/food2/800/500" alt="寿司拼盘">
        </div>
        <div class="waterfall-content">
          <h3>精致的日式寿司拼盘</h3>
          <p>由经验丰富的寿司师傅精心制作，每一款寿司都讲究食材的新鲜和刀工的精准，是味觉与视觉的双重享受。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 189</button>
            <button class="action-btn">💬 45</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user12/100/100" alt="作者头像" class="author-avatar">
              <span>林小</span>
            </div>
            <span>2周前</span>
          </div>
        </div>
      </div>

      <!-- 项目13 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/nature2/800/650" alt="沙漠景观">
        </div>
        <div class="waterfall-content">
          <h3>撒哈拉沙漠的日落</h3>
          <p>夕阳西下，撒哈拉沙漠被染成一片金黄，沙丘的轮廓在落日余晖中显得格外清晰动人。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 167</button>
            <button class="action-btn">💬 23</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user13/100/100" alt="作者头像" class="author-avatar">
              <span>黄勇</span>
            </div>
            <span>2周前</span>
          </div>
        </div>
      </div>

      <!-- 项目14 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city3/800/850" alt="城市公园">
        </div>
        <div class="waterfall-content">
          <h3>城市中的绿洲公园</h3>
          <p>在繁华的都市中心，这座公园为人们提供了一个放松身心的好去处，绿意盎然，鸟语花香。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 86</button>
            <button class="action-btn">💬 11</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user14/100/100" alt="作者头像" class="author-avatar">
              <span>陈静</span>
            </div>
            <span>2周前</span>
          </div>
        </div>
      </div>

      <!-- 项目15 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal3/800/600" alt="草原动物">
        </div>
        <div class="waterfall-content">
          <h3>非洲草原上的狮群</h3>
          <p>在广袤的非洲草原上，狮群是顶级掠食者，它们的存在维持着整个生态系统的平衡。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 215</button>
            <button class="action-btn">💬 38</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user15/100/100" alt="作者头像" class="author-avatar">
              <span>刘威</span>
            </div>
            <span>3周前</span>
          </div>
        </div>
      </div>

      <!-- 项目16 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch3/800/700" alt="古典建筑">
        </div>
        <div class="waterfall-content">
          <h3>罗马古竞技场遗址</h3>
          <p>这座建于公元1世纪的巨大建筑可容纳五万观众，是古罗马帝国辉煌历史的见证。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 178</button>
            <button class="action-btn">💬 32</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user16/100/100" alt="作者头像" class="author-avatar">
              <span>赵文</span>
            </div>
            <span>3周前</span>
          </div>
        </div>
      </div>

      <!-- 项目17 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people3/800/550" alt="传统工艺">
        </div>
        <div class="waterfall-content">
          <h3>传统手工艺人</h3>
          <p>这位老艺人从事这项传统工艺已有50年，他的双手创造出无数精美的作品，传承着古老的技艺。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 124</button>
            <button class="action-btn">💬 18</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user17/100/100" alt="作者头像" class="author-avatar">
              <span>孙丽</span>
            </div>
            <span>3周前</span>
          </div>
        </div>
      </div>

      <!-- 项目18 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-food">美食</span>
          <img src="https://picsum.photos/seed/food3/800/650" alt="街头小吃">
        </div>
        <div class="waterfall-content">
          <h3>东南亚街头小吃</h3>
          <p>热闹的夜市上，各种风味独特的街头小吃散发着诱人的香气，是体验当地文化的重要方式。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 156</button>
            <button class="action-btn">💬 29</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user18/100/100" alt="作者头像" class="author-avatar">
              <span>周明</span>
            </div>
            <span>1个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目19 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/nature3/800/900" alt="冰川景观">
        </div>
        <div class="waterfall-content">
          <h3>阿拉斯加冰川奇观</h3>
          <p>巨大的冰川在阳光下呈现出梦幻般的蓝色，随着全球变暖，这些自然奇观正逐渐消失。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 198</button>
            <button class="action-btn">💬 35</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user19/100/100" alt="作者头像" class="author-avatar">
              <span>吴芳</span>
            </div>
            <span>1个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目20 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city4/800/600" alt="桥梁建筑">
        </div>
        <div class="waterfall-content">
          <h3>横跨河流的现代桥梁</h3>
          <p>这座桥梁不仅是重要的交通枢纽，其独特的设计也使其成为城市的标志性建筑之一。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 92</button>
            <button class="action-btn">💬 13</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user20/100/100" alt="作者头像" class="author-avatar">
              <span>郑强</span>
            </div>
            <span>1个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目21 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal4/800/750" alt="鸟类">
        </div>
        <div class="waterfall-content">
          <h3>热带雨林中的珍稀鸟类</h3>
          <p>这些色彩斑斓的鸟类是热带雨林生态系统的重要组成部分，它们的存在对植物授粉至关重要。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 167</button>
            <button class="action-btn">💬 24</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user21/100/100" alt="作者头像" class="author-avatar">
              <span>王琳</span>
            </div>
            <span>1个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目22 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch4/800/550" alt="宗教建筑">
        </div>
        <div class="waterfall-content">
          <h3>古老的佛教寺庙</h3>
          <p>这座寺庙建于公元8世纪，精美的雕刻和壁画展示了古代工匠的高超技艺和宗教信仰。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 145</button>
            <button class="action-btn">💬 20</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user22/100/100" alt="作者头像" class="author-avatar">
              <span>陈明</span>
            </div>
            <span>1个半月前</span>
          </div>
        </div>
      </div>

      <!-- 项目23 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people4/800/800" alt="节日庆典">
        </div>
        <div class="waterfall-content">
          <h3>传统节日的盛大庆典</h3>
          <p>每年这个时候，当地居民都会穿上传统服饰，举行盛大的庆祝活动，传承着古老的文化习俗。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 178</button>
            <button class="action-btn">💬 31</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user23/100/100" alt="作者头像" class="author-avatar">
              <span>刘静</span>
            </div>
            <span>1个半月前</span>
          </div>
        </div>
      </div>

      <!-- 项目24 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-food">美食</span>
          <img src="https://picsum.photos/seed/food4/800/600" alt="甜点">
        </div>
        <div class="waterfall-content">
          <h3>法式甜点艺术</h3>
          <p>这些精致的法式甜点不仅味道醇厚，其精美的造型更像是一件件艺术品，让人不忍下口。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 203</button>
            <button class="action-btn">💬 47</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user24/100/100" alt="作者头像" class="author-avatar">
              <span>孙文</span>
            </div>
            <span>1个半月前</span>
          </div>
        </div>
      </div>

      <!-- 项目25 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/nature4/800/650" alt="瀑布景观">
        </div>
        <div class="waterfall-content">
          <h3>壮丽的尼亚加拉大瀑布</h3>
          <p>巨大的水流从悬崖上倾泻而下，形成壮观的瀑布景观，水雾中时常可以看到美丽的彩虹。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 225</button>
            <button class="action-btn">💬 42</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user25/100/100" alt="作者头像" class="author-avatar">
              <span>周伟</span>
            </div>
            <span>2个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目26 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city5/800/700" alt="夜景">
        </div>
        <div class="waterfall-content">
          <h3>香港维多利亚港夜景</h3>
          <p>夜晚的维多利亚港灯火辉煌，摩天大楼的灯光秀吸引了来自世界各地的游客前来观赏。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 187</button>
            <button class="action-btn">💬 36</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user26/100/100" alt="作者头像" class="author-avatar">
              <span>吴琳</span>
            </div>
            <span>2个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目27 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal5/800/550" alt="极地动物">
        </div>
        <div class="waterfall-content">
          <h3>南极的企鹅家族</h3>
          <p>在寒冷的南极大陆，这些可爱的企鹅成群结队地生活，它们的存在是这片冰封大陆上的生命奇迹。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 210</button>
            <button class="action-btn">💬 39</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user27/100/100" alt="作者头像" class="author-avatar">
              <span>郑强</span>
            </div>
            <span>2个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目28 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch5/800/850" alt="现代艺术建筑">
        </div>
        <div class="waterfall-content">
          <h3>古根海姆博物馆</h3>
          <p>由著名建筑师弗兰克·劳埃德·赖特设计，这座博物馆本身就是一件艺术品，螺旋形的设计颠覆了传统建筑理念。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 156</button>
            <button class="action-btn">💬 27</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user28/100/100" alt="作者头像" class="author-avatar">
              <span>王芳</span>
            </div>
            <span>2个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目29 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people5/800/600" alt="传统舞蹈">
        </div>
        <div class="waterfall-content">
          <h3>西班牙弗拉门戈舞蹈</h3>
          <p>弗拉门戈是西班牙的传统舞蹈，融合了歌唱、吉他演奏和舞蹈，充满了激情和力量。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 134</button>
            <button class="action-btn">💬 19</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user29/100/100" alt="作者头像" class="author-avatar">
              <span>陈明</span>
            </div>
            <span>2个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目30 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-food">美食</span>
          <img src="https://picsum.photos/seed/food5/800/750" alt="火锅">
        </div>
        <div class="waterfall-content">
          <h3>四川麻辣火锅</h3>
          <p>沸腾的红油锅底，丰富的食材，四川火锅不仅是一种美食，更是一种社交方式，亲朋好友围坐一堂，共享美味。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 230</button>
            <button class="action-btn">💬 51</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user30/100/100" alt="作者头像" class="author-avatar">
              <span>刘勇</span>
            </div>
            <span>3个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目31 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-nature">自然</span>
          <img src="https://picsum.photos/seed/nature5/800/600" alt="极光">
        </div>
        <div class="waterfall-content">
          <h3>北极光的奇幻景象</h3>
          <p>在寒冷的北极夜晚，绚丽多彩的北极光在天空中舞动，形成如梦似幻的自然奇观。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 245</button>
            <button class="action-btn">💬 48</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user31/100/100" alt="作者头像" class="author-avatar">
              <span>孙静</span>
            </div>
            <span>3个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目32 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-city">城市</span>
          <img src="https://picsum.photos/seed/city6/800/700" alt="市场">
        </div>
        <div class="waterfall-content">
          <h3>伊斯坦布尔大巴扎</h3>
          <p>这座有500多年历史的市场是世界上最大的室内市场之一，数千家店铺出售各种手工艺品和纪念品。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 167</button>
            <button class="action-btn">💬 29</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user32/100/100" alt="作者头像" class="author-avatar">
              <span>周文</span>
            </div>
            <span>3个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目33 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-animal">动物</span>
          <img src="https://picsum.photos/seed/animal6/800/800" alt="海洋哺乳动物">
        </div>
        <div class="waterfall-content">
          <h3>海洋中的温柔巨人</h3>
          <p>蓝鲸是地球上最大的动物，成年蓝鲸可达30米长，尽管体型庞大，它们却是温和的滤食性动物。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 198</button>
            <button class="action-btn">💬 34</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user33/100/100" alt="作者头像" class="author-avatar">
              <span>吴琳</span>
            </div>
            <span>3个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目34 -->
      <div class="waterfall-item">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-architecture">建筑</span>
          <img src="https://picsum.photos/seed/arch6/800/650" alt="宫殿">
        </div>
        <div class="waterfall-content">
          <h3>印度泰姬陵</h3>
          <p>这座白色大理石陵墓是莫卧儿皇帝沙贾汗为纪念其妻子而建，被认为是世界上最美丽的建筑之一。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 215</button>
            <button class="action-btn">💬 43</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user34/100/100" alt="作者头像" class="author-avatar">
              <span>郑强</span>
            </div>
            <span>4个月前</span>
          </div>
        </div>
      </div>

      <!-- 项目35 -->
      <div class="waterfall-item featured">
        <div class="waterfall-img-container">
          <span class="waterfall-category category-people">人文</span>
          <img src="https://picsum.photos/seed/people6/800/750" alt="传统婚礼">
        </div>
        <div class="waterfall-content">
          <h3>印度传统婚礼仪式</h3>
          <p>印度婚礼通常持续数天，充满了色彩、音乐和各种传统仪式，是家庭和社区的重要庆典。</p>
          <div class="waterfall-actions">
            <button class="action-btn">❤️ 256</button>
            <button class="action-btn">💬 57</button>
          </div>
          <div class="waterfall-meta">
            <div class="waterfall-author">
              <img src="https://picsum.photos/seed/user35/100/100" alt="作者头像" class="author-avatar">
              <span>王芳</span>
            </div>
            <span>4个月前</span>
          </div>
        </div>
      </div>
    </div>

    <button class="load-more">加载更多内容</button>
  </div>
</body>
</html>